<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/4/8
  Time: 22:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<link href="${pageContext.request.contextPath}/res/css/boxlist.css" rel="stylesheet" type="text/css" />

<c:forEach items="${emails}" var="item" >
    <li class="treeview boxitem" id="${item.id}"><a href="${pageContext.request.contextPath}/mail/changeBox.shtml?id=${item.id}" id="changeBoxBtn"> <i
            class="fa fa-dashboard"></i> <span>${item.account}</span>
    </a>

    </li>

</c:forEach>

<li class="header" id="listLabel"><span>分组<i class="fa fa-plus pull-right" id="addRoot" style="padding-top: 3px; color: #FFFFFF;"></i></span></li>
<li class="treeview">
    <a href="JavaScript:void (0)" id="commonMenu">
        <i class="fa fa-share"></i> <span>默认分组</span>
        <i class="fa fa-angle-down pull-right default-item"></i>
        <span class="pull-right menu" style="display: none;">
            <i class="fa fa-plus menu-item menu-add"></i>
            <i class="fa fa-random menu-item menu-update"></i>
            <i class="fa fa-trash-o menu-item menu-delete"></i>
        </span>
    </a>
    <ul class="treeview-menu common-menu" style="display: block;">
        <li class="treeview-menu-item" id="allUnread"><a href="#"><i class="fa fa-circle-o"></i> 所有未读</a></li>
        <li class="treeview-menu-item" id="allStar"><a href="#"><i class="fa fa-circle-o"></i> 星标邮件</a></li>
        <li class="treeview-menu-item" id="allMessage"><a href="#"><i class="fa fa-circle-o"></i> 所有邮件</a></li>
    </ul>
</li>

<script src="${pageContext.request.contextPath}/res/js/common.js"></script>
<script>
    $(function (){
        <c:forEach items="${emails}" var="item" >
        $.post('${pageContext.request.contextPath}/manager/showUnreadNumber.shtml',{"emailAccount":'${item.account}'},function(data){
//            alert(data);
            if(data>0){
                $("#${item.id} > a").append('<span class="label label-primary pull-right">'+data+'</span>');
            }

        });
        </c:forEach>
        $(".boxitem").removeClass('active');
        $("#${sessionScope.currentEmail.id}").addClass("active");

        $(".boxitem").click(function (){
            $(this).next("ul").toggle();
        })

        $("#commonMenu").click(function(){
            $(".common-menu").toggle(200);
        })


        $("#addRoot").click(function (){
            //  添加root

            addRootClassify()
        });

        function addRootClassify(){
            $(".treeview").last().after(
                    '<li class="treeview">'+
                    '<a href="JavaScript:void (0)"  class="rootClassify">'+
                    '<i class="fa fa-share"></i> <span><input type="text" class="menu-input-text" />'+
                    '<i class="fa fa-check menu-input-check"></i></span>'+
                    '<span class="pull-right menu" style="display: none;">'+
                    '<i class="fa fa-plus menu-item menu-add"></i>'+
                    '<i class="fa fa-random menu-item menu-update"></i>'+
                    '<i class="fa fa-trash-o menu-item menu-delete"></i>'+
                    '</span>'+
                    '</a>'+
                    '</li>'
            );


            inputCheckEvent();

        }

        function inputCheckEvent(){
            bandInputColor();
            if($(".menu-input-check").length){
                $(".menu-input-check").unbind();
            }
            $(".menu-input-check").click(function(){
                var eInput = $(this).prev("input");
                var text = eInput.val();
                eInput.after(text).remove();
                ajaxAddRoot(text);
                $(this).remove();
                addRootEvent();
            })
        }



        function inputCheck(origin){
            $(".menu-input-check").click(function() {
                var eInput = $(this).prev("span > input");
                var text = eInput.val();
                eInput.after(text).remove();
                var parentName = $(this).parent().parent().parent().parent().prev("a:first").children("span:first").text();
                $(this).remove();
                if(origin){
                    ajaxUpdateRoot(origin,text);
                }else{
                    console.log(parentName);
                    ajaxAddChildElement(text,parentName);
                }
                addRootEvent();
                tvMenuEvent();
            })
        }


        function unbindEvent(){
            $(".rootClassify").unbind();
            $(".menu-add").unbind();
            $(".menu-update").unbind();
            $(".menu-delete").unbind();

        }


        //绑定input的颜色
        function bandInputColor(){
            if($(".menu-input-text").length){
                $(".menu-input-text").unbind();
            }

            $(".menu-input-text").mouseover(function (){
                $(this).css("color","#3c8dbc");
            })
        }
        //添加root元素的事件
        function addRootEvent(){
            //解绑事件
            unbindEvent();

            $(".rootClassify").mouseover(function(){
                $(this).children(".menu").show();
                $(this).children(".default-item").hide();
            });

            $(".rootClassify").mouseout(function(){
                $(this).children(".menu").hide();
                $(this).children(".default-item").show();
            });

            $(".rootClassify").click(function(){
                $(this).next(".treeview-menu").toggle();
                var classify = $(this).next(".treeview-menu").attr("id");
                showMessageInClassify(classify);
            })

            menuItemEvent();

        }

        /**
         * 添加menuitem的事件
         */
        function menuItemEvent(){

            $(".menu-add").click(function(event){

                var eTreeViewMenu = $(this).parent().parent().next(".treeview-menu");
                if(!eTreeViewMenu.length){
                    $(this).parent().parent().after('<ul class="treeview-menu" style="display: block;"></ul>');
                }else{
                    $(this).parent().parent().find("ul").show();
                }

                eTreeViewMenu = $(this).parent().parent().next(".treeview-menu");
                $(this).parent().parent().next(".treeview-menu").append('<li class="treeview-menu-item"><a href="javascript:void(0)"><i class="fa fa-circle-o"></i> <span><input type="text" class="childmenu-input-text" />'+
                        '<i class="fa fa-check menu-input-check"></i></span>'+
                        '<span class="pull-right menu" style="display: none;">'+
                        '<i class="fa fa-plus menu-item menu-add"></i>'+
                        '<i class="fa fa-random menu-item menu-update"></i>'+
                        '<i class="fa fa-trash-o menu-item menu-delete"></i>'+
                        '</span></a></li>');

                unbindTvMenu();
                inputchildTextColor();
                inputCheck();
                if(eTreeViewMenu.length){
                    $(this).parent().parent().append('<i class="fa fa-angle-down pull-right default-item"></i>');

                    //点击事件
                    eTreeViewMenu.prev("a").click(function (){
                        $(this).next().toggle();
                    })
                }

                stopProp(event);
            })

            //

            //设置鼠标移入颜色
            function inputchildTextColor(){

                if($(".childmenu-input-text").length){
                    $(".childmenu-input-text").unbind();
                }

                $(".childmenu-input-text").mouseover(function (){
                    $(this).css("color","#8aa4af");
                })
            }
            //修改节点
            $(".menu-update").click(function(){
                //解绑事件
                unbindEvent();
                var origin = $(this).parent().prev("span").text();
                $(this).parent().prev("span").html('<input type="text" class="menu-input-text" />'+
                        '<i class="fa fa-check menu-input-check"></i>');
                bandInputColor();
                $(".menu").hide();
                inputCheck(origin);
                unbindTvMenu();
                inputchildTextColor();
                stopProp(event);

            })

            $(".menu-delete").click(function(){
                var origin = $(this).parent().prev("span").text();
                ajaxDeleteRoot(origin);
                $(this).parent().parent().parent().remove();
                stopProp(event);
            })
        }


        addRootEvent();

        function unbindTvMenu(){
            $(".treeview-menu-item").unbind();
        }

        function tvMenuEvent(){

            unbindTvMenu();
            $(".treeview-menu-item").mouseover(function (){
                $(this).children().children(".menu").show();
            });

            $(".treeview-menu-item").mouseout(function (){
                $(this).children().children(".menu").hide();
            });

        }

        //ajax添加root节点
        function ajaxAddRoot(name){
            var url = "${pageContext.request.contextPath}/tree/ajaxAddRoot.shtml";
            var params = {"name":name}
            $.post(url,params,function (data){
                if(data){
                    alert("插入成功");
                }else{
                    alert("插入失败");
                }
            })
        }

        //ajax修改root节点
        function ajaxUpdateRoot(origin,newName){
            var url = "${pageContext.request.contextPath}/tree/ajaxUpdateRoot.shtml";
            var params = {"origin":origin,"newName":newName};
            $.post(url,params,function (data){
                if(data){
                    alert("修改成功");
                }else{
                    alert("修改失败");
                }
            })
        }



        //ajax删除root节点
        function ajaxDeleteRoot(name){
            var url = "${pageContext.request.contextPath}/tree/ajaxDeleteRoot.shtml";
            var params = {"name":name};
            $.post(url,params,function (data){
                if(data){
                    alert("删除成功");
                }else{
                    alert("删除失败");
                }
            })
        }


        function tvMenuItemEvent(){
            $(".treeview-menu-item").click(function (){

                $(".treeview-menu-item").removeClass("active");
                $(this).addClass("active");
                if($(this).attr("id")=="allUnread"){
                    showAllUnreadView();
                }else if($(this).attr("id") == "allStar"){
                    showAllStarList();
                }else if($(this).attr("id") == 'allMessage'){
                    showAllMessage();
                }else{
                   var classify =  $(this).children().children("span").text();
                    showMessageInClassify(classify);
                }

            })
        }
        tvMenuItemEvent();

        function showMessageInClassify(classify){
            var url = "${pageContext.request.contextPath}/classify/showView.shtml";
            $.get(url,function (data){
                $(".content-wrapper").html(data);
                var url = "${pageContext.request.contextPath}/classify/showMessageInClassify.shtml";
                var params = {"classify":classify};
                $.post(url,params,function (data){
                    appendMessageItem(data);
                    addClassifyItemEvent();
                })
            })
        }

        function showAllMessage(){
            var url = "${pageContext.request.contextPath}/classify/showView.shtml";
            $.get(url,function (data){
                $(".content-wrapper").html(data);
                var url = "${pageContext.request.contextPath}/classify/showAllMessage.shtml";
                $.get(url,function (data){
                    appendMessageItem(data);
                    addClassifyItemEvent();
                })
            })
        }

        function showAllStarList(){
            var url = "${pageContext.request.contextPath}/classify/showView.shtml";
            $.get(url,function (data){
                $(".content-wrapper").html(data);
                var url = "${pageContext.request.contextPath}/classify/showAllStarList.shtml";
                $.get(url,function (data){
                    appendMessageItem(data);
                    addClassifyItemEvent();
                })
            })
        }
        function showAllUnreadView(){
            var url = "${pageContext.request.contextPath}/classify/showView.shtml";
            $.get(url,function (data){
                $(".content-wrapper").html(data);
                var url = "${pageContext.request.contextPath}/classify/showAllUnread.shtml";
                $.get(url,function (data){
                    appendMessageItem(data);
                    addClassifyItemEvent();
                })
            })
        }

        function addClassifyItemEvent(){
            //添加点击事件
            $(".classify-message-list-item").click(function (){
                var id = $(this).attr("id");
                var url = "${pageContext.request.contextPath}/classify/messageDetails.shtml";
                $.post(url,{
                    "id":id
                },function (data){
                    $(".classify-mail-read-content").html(data);
                })
            })
        }



        function appendMessageItem(data){
            $(".classify-item").empty();
            for(var i = 0;i<data.length;i++){
                $(".classify-item").append('<a href="javascript:void(0)" class="classify-message-list-item" id="'+data[i].id+'">'+
                        '<h3 class="classify-list-subject">'+
                        data[i].subject+
                        '</h3>'+
                        '</a>'+
                        '<hr/>');
            }
        }

        //
        function ajaxAddChildElement(name,parentName){
            var url = "${pageContext.request.contextPath}/tree/addChildElement.shtml";
            var params = {"name":name,"parentName":parentName};
            $.post(url,params,function (data){
                if(data){
                    alert("添加成功");
                }else{
                    alert("添加失败");
                }
            })
        }

        function ajaxUpdateChildElement(name,originName){
            var url = "${pageContext.request.contextPath}/tree/updateChildElement.shtml";
            var params = {"name":name,"originName":originName};
            $.post(url,params,function (data){
                if(data){
                    alert("更新成功");
                }else{
                    alert("更新失败");
                }
            })

        }

        function ajaxDeleteChildElement(name){
            var url = "${pageContext.request.contextPath}/tree/deleteChildElement.shtml";
            var params = {"name":name};
            $.post(url,params,function (data){
                if(data){
                    alert("删除成功");
                }else{
                    alert("删除失败");
                }
            })
        }



        $.get("${pageContext.request.contextPath}/tree/listAllElement.shtml",function (data){
            parseMenuTree(data);
        })

        function tvMenuClick(){
            $(".treeview-menu-item").click(function (){
                $(this).next(".treeview-menu").toggle();
            })
        }
        function parseMenuTree(json){
            for(var i=0;i<json.length;i++){
                console.log(json[i].name);
                $(".treeview").last().after(
                        '<li class="treeview">'+
                        '<a href="JavaScript:void (0)"  class="rootClassify">'+
                        '<i class="fa fa-share"></i> <span>' +
                        json[i].name +
                        '</span>'+
                        '<span class="pull-right menu" style="display: none;">'+
                        '<i class="fa fa-plus menu-item menu-add"></i>'+
                        '<i class="fa fa-random menu-item menu-update"></i>'+
                        '<i class="fa fa-trash-o menu-item menu-delete"></i>'+
                        '</span>'+
                        '</a>'+

                        '<ul class="treeview-menu" id="' +
                        json[i].name +
                        '" style="display: none;">'+
                        '</ul>'+'</li>'
                );
                if(json[i].child.length){
                    addMenuTreeChildren(json[i].child,json[i].name);
                }
                addRootEvent();
                tvMenuEvent();
                tvMenuClick();
                tvMenuItemEvent();
            }
        }

        function addMenuTreeChildren(child,parentName){
            for(var i=0;i<child.length;i++){
                $("ul[id='"+parentName+"']").append('<li class="treeview-menu-item"><a href="javascript:void(0)"><i class="fa fa-circle-o"></i> <span>' +
                child[i].name+
                '</span>'+
                '<span class="pull-right menu" style="display: none;">'+
                '<i class="fa fa-plus menu-item menu-add"></i>'+
                '<i class="fa fa-random menu-item menu-update"></i>'+
                '<i class="fa fa-trash-o menu-item menu-delete"></i>'+
                '</span></a></li>' +
                '<ul class="treeview-menu" id="'+child[i].name+'" style="display: none;">' +
                '</ul>');
                if(child[i].child){
                    addMenuTreeChildren(child[i].child,child[i].name);
                }else{
                    return;
                }

            }


        }

    });

</script>

